/**
    放大镜效果
       遮罩层随光标移动而移动，右边大图反方向运行
         1. 遮罩层随光标移动而移动
            绑定光标在显示盒子中的移动事件mousemove
            获取光标相对自身的位置复制给遮罩层

         2. 右边大图反方向运行
       计算比例
          图片比例
          移动距离比例

 */
function magnifyingGlass(product) {
    let showStr = product.list.map(item => {
        return `  <img src="${item}" alt="">`
    }).join('')
    let bigStr = product.list.map(item => {
        return `  <img src="${item}" alt="">`
    }).join('')
    let smallStr = product.list.map(item => {
        return `  <li><img src="${item}" alt=""></li>`
    }).join('')
    let showele = document.querySelector('.show-img')
    let smallele = document.querySelector('.samll')
    let bigele = document.querySelector('.wraper-r')
    showele.innerHTML = showStr
    bigele.innerHTML = bigStr
    smallele.innerHTML = smallStr
    let glass = new Glass('#glass1')
    glass.bigPic = glass.rootEle.querySelectorAll('.wraper-r img') //背景图片
    glass.bigPic[0].style.display = 'block'
    let samllPic = glass.rootEle.querySelectorAll('.show-img img')
    samllPic[0].style.display = 'block'
    glass.init()
    glass.onGlass()
    click()

}
class Glass {
    constructor(id) {
        this.rootEle = document.querySelector(id)
        this.showBox = this.rootEle.querySelector('.show-img') //显示盒子
        this.mask = this.rootEle.querySelector('.show-box .mask') //遮罩层
        this.glassBox = this.rootEle.querySelector('.wraper-r') //放大镜区域
        this.bigPic = this.rootEle.querySelector('.wraper-r img') //背景图片
    }
    /**
     * 初始化比例
     *   遮罩层      放大镜
     *  ------- =  ------------
     *  显示盒子     背景图
     *    背景图 = 放大镜*显示盒子/遮罩层
     *  
     */
    init() {
        let w = this.glassBox.clientWidth * this.showBox.clientWidth / this.mask.clientWidth
        let h = this.glassBox.clientHeight * this.showBox.clientHeight / this.mask.clientHeight
        for (let i = 0; i < this.bigPic.length; i++) {
            this.bigPic[i].style.width = w + 'px'
            this.bigPic[i].style.height = h + 'px'
        }
    }
    onGlass() {
        let that = this
        //1. 绑定光标在显示盒子中的移动事件mousemove
        this.showBox.addEventListener('mousemove', function (e) {
            e = e || window.event
            let x = e.offsetX - that.mask.clientWidth / 2
            let y = e.offsetY - that.mask.clientHeight / 2

            //边界检查
            if (x < 0) {
                x = 0
            }
            if (x > that.showBox.clientWidth - that.mask.clientWidth) {
                x = that.showBox.clientWidth - that.mask.clientWidth
            }
            if (y < 0) {
                y = 0
            }
            if (y > that.showBox.clientHeight - that.mask.clientHeight) {
                y = that.showBox.clientHeight - that.mask.clientHeight
            }

            that.mask.style.left = x + 'px'
            that.mask.style.top = y + 'px'

            //右边大图反方向运行
            /**
             * 计算移动比例
             *   遮罩层移动距离        遮罩层
             *  -------------- = -----------------
             *   背景图移距离          放大镜
             *  背景图移距离X = 遮罩层移动距离x * 放大镜w/遮罩层w
             *  背景图移距离y = 遮罩层移动距离y * 放大镜h/遮罩层h
             *   
             */

            let moveX = x * that.glassBox.clientWidth / that.mask.clientWidth
            let moveY = y * that.glassBox.clientHeight / that.mask.clientHeight
            console.log('moveX ', moveX, 'moveY :', moveY);
            for (let i = 0; i < that.bigPic.length; i++) {
                that.bigPic[i].style.left = `${-moveX}px`
                that.bigPic[i].style.top = `${-moveY}px`
            }
            let bigremove = document.querySelector('.show-img')
            let samllremove = document.querySelector('.wraper-r ')
            let zhezhaoremove = document.querySelector('.mask')
            bigremove.onmousemove = function () {
                zhezhaoremove.style.display = 'block'
                samllremove.style.display = 'block'
            }
            bigremove.onmouseout = function () {
                zhezhaoremove.style.display = 'none'
                samllremove.style.display = 'none'
            }
        })
    }
}

function click() {
    let zhutuele = document.querySelectorAll('.show-img>img')
    let liele = document.querySelectorAll('.samll>li')
    let datuele = document.querySelectorAll('.wraper-r img')
    for (let i = 0; i < liele.length; i++) {
        liele[i].onclick = function () {
            liele.forEach(item => item.style.border = 'none')
            zhutuele.forEach(item => item.style.display = 'none')
            datuele.forEach(item => item.style.display = 'none')
            //添加样式
            liele[i].style.border = '2px solid red'
            zhutuele[i].style.display = 'block'
            datuele[i].style.display = 'block'
        }
    }
}


// glass.init()
// glass.onGlass()

function getProductId() {
    let url = location.href
    // console.log(location.search)
    url = url.substring(url.indexOf('?') + 1)
    let arr = url.split('=')
    let id = arr[1]
    return id
}

function loadProuctDetail() {
    let id = getProductId()
    axios({
        method: 'get',
        url: 'http://api.yuguoxy.com/api/shop/find',
        params: {
            id,
        },
    }).then(response => {
        let data = response.data
        let {
            resultCode,
            resultInfo
        } = data
        if (resultCode == 1) {
            let product = resultInfo //商品详情对象
            magnifyingGlass(product)
            jinename(product)
        }
    })
}
//金额名字的模板字符串
function jinename(product) {
    let str = `<p>${product.product}</p>
    <p>金额￥${product.price}元</p>
    <p>已有${product.oldprice}购买</p>
    <button class="get-button">添加到购物车</button>
    <a href='../pages/cart.html'><button class="shou-button">查看购物车</button></a>`
    let namejine = document.querySelector('.show-middle')
    namejine.innerHTML = str
    getcart(product)
}



function getcart(product) {
    let cartchun = document.querySelector('.get-button')
    cartchun.onclick = function () {
        let productList = JSON.parse(localStorage.getItem('CART-LIST')) || []
        console.log(productList);
        let productjieshou = productList.find(item => item.id == product.id)
        if (productjieshou) {
            productjieshou.putaway++
            localStorage.setItem('CART-LIST', JSON.stringify(productList))
        } else {
            productList.push(product)
            localStorage.setItem('CART-LIST', JSON.stringify(productList))
        }
        alert('添加成功')
    }
}

loadProuctDetail()